﻿.text_color{
    color:#31c37c;
    font-size:.8rem;
}
body{
    background: #F5F5EE;
}
.header{
    padding:0 .5rem;
    width:100%;
    height:2.5rem;
    position:fixed;
    left:0;
    top:0;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index:100;
    background:#fff;
}
.logo{
    width: 5rem;
    height: 1.1rem;
    background: url(../images/spirits.png) no-repeat 0rem 0rem;
    background-size:21rem  21rem;
}
.middle{
    flex:1;
}
.search{
    width: 1.2rem;
    height: 1.3rem;
    display: inline-block;
    background: url(../images/spirits.png) no-repeat -6.6rem 0rem;
    background-size:21rem  21rem;
}
.hamburger{
    display: inline-block;
    width: 1.2rem;
    height: 1.3rem;
    padding:0 .6rem;
    margin-left:.4rem;
    background: url(../images/spirits.png) no-repeat -8.6rem 0rem;
    background-size:21rem  21rem;
}
/*
 .banner start
*/
.banner{
    margin-top:2.5rem;
    width:100%;
}
 .swiper-container {
     width: 100%;
     height: 100%;
 }
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide>img{
    width:100%;
}
/*
 .banner end
*/

/*
.items  start
*/
.items{
    z-index:99;
    position:relative;
    /*让背景图的上半部分遮掉一部分的轮播区域的内容*/
    margin-top:-2.5rem;
    width:100%;
    height:4.5rem;
    /*水平方向的居中问题:
    在父元素中一开始就要设置 text-align:center;
    然后再对 li进行 等分
    */
    text-align: center;
    background: url("../images/flow.png");
    /*让背景图的宽度 压小之后全部展现出来,高度为.items的高度*/
    background-size: 100% 4.5rem;

}
.item{
    margin-top:1.5rem;
    display: inline-block;
    width:22%;
    /*这里的 text-align:center; 能让 每个li.item 里面的 文本居中显示*/
    text-align: center;
}
/*图标的共有 属性*/
.icon{
    display: block;
    /*这里的 margin:0 auto; 能让 每个 li.item 里面的 图标 居中显示*/
    margin:0 auto;
}
/*每个图标的 私有属性*/
.category{
    width: 1.1rem;
    height: 1.1rem;
    background:url(../images/spirits.png) no-repeat 0rem -10.5rem;
    background-size:21rem  21rem;
}
.rank{
    width: 1.1rem;
    height: 1.1rem;
    background:url(../images/spirits.png)  no-repeat -2.3rem -10.5rem;
    background-size:21rem  21rem;
}
.time{
    width: 1.2rem;
    height: 1.2rem;
    background:url(../images/spirits.png) no-repeat -4.95rem -10.4rem;
    background-size:21rem  21rem;
}
.history{
    width: 1.2rem;
    height: 1.2rem;
    background: url(../images/spirits.png) no-repeat -7.6rem -10.4rem;
    background-size:21rem  21rem;
}

.name{
    display: block;
    margin-top: 0.25rem;
    font-size: 0.6rem;
    color: #969696;
}
/*
.items  end
*/


/*
对轮播的轮播圆点高亮样式的设置 start
*/

.swiper-pagination-bullet{
    /*修改分页的样式,记得是 background 而不是 color*/
    background: #fff;
    /*记得这里要加上 opacity:1 */
    opacity:1;
}
.swiper-pagination-bullet-active {
    background: red;
}
/*
对轮播的轮播圆点高亮样式的设置 end
*/

/*"最新推荐","特别看点","最热推送"... 对应的图标 以及 右侧的 "更多" 的图标   start*/
.sub_title{
    display: flex;
    flex-direction: row;
    with:100%;
    height:1.5rem;
    padding:.5rem;
}
.recommend_wrapper .sub_title_left{
    width: 4.7rem;
    height: 1.2rem;
    background: url(../images/spirits.png) no-repeat 0rem -2.77rem;
    background-size:21rem  21rem;
}
.hot_wrapper .sub_title_left{
    width: 4.7rem;
    height:1.2rem;
    background: url(../images/spirits.png) no-repeat 0rem -4.5rem;
    background-size:21rem  21rem;
}
.daily_wrapper .sub_title_left{
    width: 4.7rem;
    height:1.2rem;
    background: url(../images/spirits.png) no-repeat 0rem -6rem;
    background-size:21rem  21rem;
}
.lovely_wrapper .sub_title_left{
    width: 4.7rem;
    height: 1.2rem;
    background: url(../images/spirits.png) no-repeat 0rem -7.7rem;
    background-size:21rem  21rem;
}
.special_wrapper .sub_title_left{
    width: 4.7rem;
    height: 1.2rem;
    background: url(../images/spirits.png) no-repeat 0rem -9.3rem;
    background-size:21rem  21rem;
}

.sub_title_middle{
    flex:1;
}

.sub_title_right{
    margin-top:.5rem;
    width: 2rem;
    height: .5rem;
    background: url(../images/spirits.png) no-repeat -10.5rem 0rem;
    background-size:21rem  21rem;
}

/*"最新推荐","特别看点","最热推送"... 对应的图标 以及 右侧的 "更多" 的图标 end*/

/*"最新推荐"，"最热推荐"，每个 li标签 的布局 start*/
.recommend_items{
    /*1*/
    width:100%;
    text-align: center;
    /*2*/
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}
.recommend_item{
    /*3*/
    width:28%;

    margin-bottom:.5rem;
    padding-bottom:.2rem;
    border-radius: .4rem;
    background:#fff;
}
.recommend_item img{
    /*4*/
    width:100%;

    border-radius: .2rem;
}
/*页面中的标题(用strong 标签包裹) 的 文字样式以及间距的设置 */
.recommend_item strong,.daily_title strong,.lovely_desc strong{
    display: block;
    margin: 0.25rem 0;
    font-size: 0.7rem;
    color: #535252;
}
/*页面中的 文本 (用small 标签包裹) 的 文字样式以及间距的设置*/
.recommend_item small,.daily_author,.lovely_desc small,.lovely_time small{
    display: block;
    margin-bottom: 0.375rem;
    min-height: 0.6rem;

    font-size: 0.6rem;
    color: #969696;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* "最新推荐"，"最热推荐" 每个 li标签 的布局 end*/

/* "特别看点" 每个li标签的布局 start*/
.special_content{
    width:100%;
    text-align: center;
}
.special_content li{
    display: inline-block;
    width:45%;
    margin-left:2%;
}
.special_content li img{
    width:100%;
}
/* "特别看点" 每个li标签的布局 end*/

/* "每日推荐" start*/
.daily_item{
    width:94%;
    text-align: center;
    margin-left:3%;
    background: #fff;
}
.daily_img{
    width:100%;
}
.daily_title{
    padding:.5rem .5rem 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/* "每日推荐"  end*/

/* "猜你喜欢" start*/
.lovely_content{
    width:94%;
    text-align: center;
    background: #fff;
    padding:3%;

}
.lovely_content li{
    margin:.5rem;
}
.lovely_link{
    width:100%;
    text-align: center;
    /*1.*/
    display: flex;

    background:#F5F5EE;
    border-radius: .4rem;
}

.lovely_img{
    /*2. 左侧内容多的话，会自动撑开左侧的div。*/
    flex-basis: auto;
    white-space: nowrap;
}
.lovely_img img{
    width:100%;
    border-radius: .4rem;
}
.lovely_desc{
    /*3.同时右边的div还可以自适应剩余的宽度*/
    width: 100%;
    margin-left:1rem;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
}


/*            搜索页  start      */
.back{
    width: 1.1rem;
    height: 1.1rem;
    background: url(../images/spirits.png) no-repeat -5.8rem -2.77rem;
    background-size:21rem  21rem;
}
.search_input{
    border:1px solid #31c37c;
    background: transparent;
    flex: 1;
    padding:.4rem;
    margin:.4rem;
    border-radius: .4rem;
}
.search_input input{
    width:100%;
    height:100%;
    border:none;
    outline: none;
}
.search_btn{
    font-size:.8rem;
    width: 2.5rem;
    /*margin:0rem 1rem;*/
}
.tips_text{
    position: relative;
    margin:3rem 1rem .5rem 1rem;
    font-size:.8rem;
}

.search_hot_item{
    display: inline-block;
    border:1px solid #31c37c;
    padding:.5rem 1.5rem;
    border-radius:.6rem;
    margin:.2rem;
}

/*            搜索页  end      */


/*             分类页 start            */
.category_items,.category_items_others{
    padding:.6rem 0;
    margin:3rem 0rem 0rem 2%;
    width:96%;
    text-align: center;
    font-size:0;
    background: #fff;
}
.category_item{
    display: inline-block;
    margin:.5rem 0rem 0rem 4%;

    padding:.4rem;
    width:28%;
    font-size:.8rem;
    border:1px solid #31c37c;
    box-sizing: border-box;
    border-radius: .4rem;
    background: #fff;
}
.category_item:nth-child(3n) {
    /*4.很重要*/
    margin-right:4%;
}
.category_items_others{
    margin-top:1rem;
}
.category_item_others{
    margin-top:.5rem;
    position: relative;
    display: inline-block;
    width:45%;
    height:2rem;
}
.category_item_others span{
    position: absolute;
    left: 0.9rem;
    top: 2.05rem;
    font-size:.8rem;
    letter-spacing: .2rem;
}

.category_item_others img{
    width:100%;

}







/*             分类页 end            */